<template>
  <div>
    <el-card header="element-plus图标" shadow="none" class="!border-none">
      <div class="flex items-center">
        <icon class="m-4" :size="24" name="el-icon-Search" />
        <icon class="m-4" :size="24" name="el-icon-Plus" />
        <icon class="m-4" :size="24" name="el-icon-FullScreen" />
        <icon class="m-4" :size="24" name="el-icon-Setting" />
        <icon class="m-4" :size="24" name="el-icon-Warning" />
      </div>
    </el-card>
    <el-card header="本地图标" shadow="none" class="!border-none mt-4">
      <div class="flex items-center">
        <icon class="m-4" :size="24" name="local-icon-baoxian" />
        <icon class="m-4" :size="24" name="local-icon-youhui" />
        <icon class="m-4" :size="24" name="local-icon-daiyunying" />
        <icon class="m-4" :size="24" name="local-icon-diancanshezhi" />
        <icon class="m-4" :size="24" name="local-icon-dianzifapiao" />
      </div>
    </el-card>
    <el-card header="图标选择器" shadow="none" class="!border-none mt-4">
      <div class="flex items-center">
        <icon-picker v-model="state.value" />
      </div>
    </el-card>
    <el-card
      header="element-plus图标库大全（点击复制图标名称）"
      shadow="none"
      class="!border-none mt-4"
    >
      <div class="flex items-center">
        <div class="flex flex-wrap">
          <div
            v-for="item in getElementPlusIconNames()"
            :key="item"
            class="m-1"
          >
            <el-button v-copy="item">
              <icon :name="item" :size="20" />
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card
      header="本地图标库大全（点击复制图标名称）"
      shadow="none"
      class="!border-none mt-4"
    >
      <div class="flex items-center">
        <div class="flex flex-wrap">
          <div v-for="item in getLocalIconNames()" :key="item" class="m-1">
            <el-button v-copy="item">
              <icon :name="item" :size="20" />
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import Icon from "@/components/icon/index.vue";
import { getElementPlusIconNames, getLocalIconNames } from "@/components/icon";
const state = reactive({
  value: "",
});
</script>
